<template>
  <div class="welcome">
    <div class="top">
      <div class="top-left">
        <div class="top-left-top">
          <h5>开发工程师</h5>
         
          <el-avatar :size="50" :src="avatarUrl"></el-avatar>
          <p class="user--info__nickname">{{userInfo.nickname}}</p>
           
        </div>
        <div class="top-left-bottom">
          <!-- <h5>日历</h5> -->
          <div class="calendar">
            <el-calendar v-model="date" height="100%"> </el-calendar>
          </div>
        </div>
      </div>
      <div class="top-right">
        <div class="top-right-top">
          <div class="top-right-top-left">
            <div class="top-right-top-left-top">
              <h5>早上好</h5>
            </div>
            <div class="top-right-top-left-bottom">
              <h5>天气</h5>
            </div>
          </div>
          <div class="top-right-top-right">
            <h5>通知公告</h5>
          </div>
        </div>
        <div class="top-right-bottom">
          <div class="expectCharts" ref="expectCharts"></div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-left">
        <div class="achieveCharts" ref="achieveCharts"></div>
      </div>
      <div class="bottom-right">
        <div class="welcome-container" ref="welContainer"></div>
      </div>
    </div>
  </div>
</template>
<script>
import {mapState} from "vuex"  //引入获取名称和头像
import * as echarts from "echarts"; //引入echarts
import { taskDataApi, expectDataApi, lineDataApi } from "@/api";
export default {
  data() {
    return {
      date: new Date(),
    };
  },
  computed: {
    ...mapState(["userInfo"]),
    avatarUrl() {
      return this.userInfo.headimgurl
        ? this.userInfo.headimgurl
        : "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png";
    },
  },
  mounted() {
    //1初始化echarts

    //2定义option

    //3调用setoption

    this.$nextTick(() => {
      let myChart1 = echarts.init(this.$refs.welContainer);
      let option = {
        title: {
          text: "任务概况",
        },

        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          orient: "vertical", //legend提示对齐的方式
          left: "70%", //水平方向的偏移位置
          top: "10%", //垂直方向的偏移位置
          // left:"right",
          // top:"bottom",
        },
        series: [
          {
            name: "任务进度",
            type: "pie",
            radius: ["30%", "50%"], //图形的样式
            center: ["41%", "40%"], //1.水平方向 2.垂直方向
            avoidLabelOverlap: false,
            label: {
              show: true,
              formatter: "{b}{d}%",
              //  - a 表示系列(series)的名称  - b 表示数据的名字  - c 表示数据的值 - d 表示数据百分比
            },
            emphasis: {
              //强调
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            labelLine: {
              //牵引线
              show: true,
              length: 20, //牵引线长度
              length2: 40,
              lineStyle: {
                //牵引线颜色
                color: "#808080",
              },
            },
            data: [
              { value: 1048, name: "搜索引擎" },
              { value: 735, name: "直接访问" },
              { value: 580, name: "邮件营销" },
              { value: 484, name: "联盟广告" },
              { value: 300, name: "视频广告" },
            ],
          },
        ],
      };
      taskDataApi().then((res) => {
        console.log(res.data);
        let data = res.data.data;
        option.series[0].data = data; //更改option中的data
        myChart1.setOption(option); //重新设置图表属性
      });
      //   myChart1.setOption(option) //重新设置图表属性

      //   //阶段学习情况
      // let myChart1 = echarts.init(this.$refs.welContainer);
      let achieveCharts = echarts.init(this.$refs.achieveCharts);

      let achieveChartsOption = {
        // legend: {
        //   left: "85%",
        //   top: "bottom",
        // },
        xAxis: {
          //x轴
          type: "category",
          // data: ['Mon','Tue','Wed','Thu'],
          data: [],
          show: false,
        },
        yAxis: {
          type: "value",
          show: false, //是否隐藏坐标轴
        },
        label: {
          //提示内容
          show: true,
          formatter: "{b}:{c}%", //格式化内容
        },
        series: [],
        // series: [{
        //   data:[123,343,465,676],
        //   type:'line',
        //   smooth:true
        // }],
      };
      // achieveCharts.setOption(achieveChartsOption);

      //折线图异步请求
      lineDataApi().then((res) => {
        let data = res.data.data;
        // console.log(data);
        let xData = [];
        let sData = data.map((item) => {
          xData.push(item.name);
          return item.rate;
        });

        achieveCharts.setOption({
          xAxis: {
            data: xData,
          },
          series: [
            {
              name: "学习进度",
              data: sData,
              type: "line",
              smooth: 1, //是否开启平衡曲线
            },
          ],
        });
      });
      achieveCharts.setOption(achieveChartsOption);

      //期望课程
      let expectCharts = echarts.init(this.$refs.expectCharts);

      let expectChartsOption = {
        tooltip: {
          show: true,
          trigger: "item", //散点图和饼图的可以使用item触发
        },
        legend: {
          //表示数据的提示
          top: "5%", //距离顶部偏移5%
          left: "right", //靠左排列的位置
          top: "bottom", //靠顶部排列的位置
          orient: "vertical", //排列方向 horizontal
          itemWidth: 10, //提示框的宽度
          itemHeight: 10, //提示框的高度
          textStyle: {
            //设置字体样式
            // color:"#fff"//颜色
          },
        },
        color: ["#0C7BE3", "#5BA1E3", "#88B7E3", "#44BA81", "#E43961"], //设置环形图颜色
        series: [
          //系列
          {
            name: "访问来源",
            type: "pie",
            center: ["30%", "50%"], //调整饼图在容器中的位置 左右 上下
            radius: ["40%", "70%"], //半径
            avoidLabelOverlap: true, //重要属性 防止标签重叠
            label: {
              //文字数据提示
              show: true,
              position: "center", //可以是inner center outer设置提示位置
              formatter: "{d}%", //\n\n很关键 能够让文字显示在牵引线上方
              // padding: [0, -50]//文字的padding位置
            },
            emphasis: {
              //强调(当鼠标移入的时候显示的强调内容)
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              //牵引线
              show: true,
              length: 20, //牵引线长度
              length2: 40,
              lineStyle: {
                //牵引线颜色
                color: "#808080",
              },
            },
            data: [
              //数据源
              { value: 1048, name: "搜索引擎" }, //name属性和legend中内容对应
              { value: 735, name: "直接访问" },
              { value: 580, name: "邮件营销" },
              { value: 484, name: "联盟广告" },
              { value: 300, name: "视频广告" },
            ],
          },
        ],
      };
      expectCharts.setOption(expectChartsOption);

      expectDataApi().then((res) => {
        let data = res.data.data;
        let sData = data.map((item) => {
          return {
            value: item.rate,
            name: item.title,
          };
        });
        expectCharts.setOption({
          series: {
            name: data.desc,
            type: "pie",
            radius: ["40%", "70%"], //半径
            avoidLabelOverlap: true, //重要属性 防止标签重叠
            label: {
              //文字数据提示
              show: true,
              position: "outer", //可以是inner center outer设置提示位置
              formatter: "{b}:{d}%", //\n\n很关键 能够让文字显示在牵引线上方
              // padding: [0, -50]//文字的padding位置
            },
            emphasis: {
              //强调(当鼠标移入的时候显示的强调内容)
              label: {
                show: true,
                fontSize: "10",
                fontWeight: "bold",
              },
            },
            labelLine: {
              //牵引线
              show: true,
              length: 10, //牵引线长度
              length2: 10,
              lineStyle: {
                //牵引线颜色
                color: "#808080",
              },
            },
            data: sData,
          },
        });
      });
    });
  },
};
</script>
<style scoped lang="less">
.welcome {
  display: flex;
  flex-direction: column;
  .top {
    //上半部分
    display: flex;
    height: 380px;
    width: 100%;
    // border: 1px solid red;
    margin: 10px 0;
    .top-left {
      //上半部左边
      box-sizing: border-box;
      height: 100%;
      width: 40%;
      // border: 1px solid #999;
      display: flex;
      flex-direction: column;
      .top-left-top {
        height: 40%;
        // border: 1px solid red;
        // box-sizing: border-box;
      }
      .top-left-bottom {
        height: 60%;
        // border: 1px solid rgb(0, 255, 85);
        box-sizing: border-box;
       
        .calendar /deep/ .el-calendar-day {
          height: 100%;
          padding-top: 0;
          padding-bottom: 0;
        }
        .calendar /deep/ .el-calendar-table thead th {
          padding-top: 0;
          padding-bottom: 0;
        }
        .calendar /deep/ .el-calendar__header {
          padding-top: 5px;
          padding-bottom: 5px;
        }
        .calendar /deep/ .el-calendar__body {
          padding-top: 10px;
          padding-bottom: 10px;
        }
      }
    }
    .top-right {
      //上右边
      box-sizing: border-box;
      height: 100%;
      width: 60%;
      // border: 1px solid #000;
      display: flex;
      flex-direction: column;
      .top-right-top {
        height: 50%;
        width: 100%;
        // border: 1px solid yellowgreen;
        box-sizing: border-box;
        display: flex;
        .top-right-top-left {
          height: 100%;
          width: 40%;
          // border: 1px solid rgb(12, 72, 150);
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          .top-right-top-left-top {
            width: 100%;
            height: 50%;
            // border: 1px solid rgb(61, 7, 49);
            box-sizing: border-box;
          }
          .top-right-top-left-bottom {
            width: 100%;
            height: 50%;
            // border: 1px solid rgb(61, 7, 49);
            box-sizing: border-box;
          }
        }
        .top-right-top-right {
          height: 100%;
          width: 60%;
          // border: 1px solid rgb(61, 7, 49);
          box-sizing: border-box;
        }
      }
      .top-right-bottom {
        height: 50%;
        width: 100%;
        // border: 1px solid red;
        box-sizing: border-box;
        .expectCharts {
          height: 100%;
        }
      }
    }
  }
  .bottom {
    //下半部分
    height: 280px;
    // border: 1px solid greenyellow;
    display: flex;
    .bottom-left {
      height: 100%;
      width: 55%;
      // border: 1px solid red;
      box-sizing: border-box;
      .achieveCharts {
        height: 100%;
      }
    }
    .bottom-right {
      height: 100%;
      width: 45%;
      // border: 1px solid rgb(105, 221, 115);
      // box-sizing: border-box;
      .welcome-container {
        height: 400px;
        margin-top: 10px;
      }
    }
  }
}
</style>